<template>
  <div>
    <!--  面包屑导航区域 -->
    <br>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>收银</el-breadcrumb-item>
    </el-breadcrumb>

    <!--  卡片视图区域-->
    <el-card >
      <!--搜索与添加区域-->
      <el-row :gutter="25">
        <el-col :span="15">
          <el-input placeholder="请输入商品编号"
                    v-model="cinItemBarcode"
                    ref="clickPosition">
            <el-button slot="append" icon="el-icon-search"
            @click="getItemMsg"></el-button>
          </el-input>
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" @click="getPriceMsg">结账</el-button>
          <el-dialog title="购物清单" :visible.sync="dialogVisible" width="35%" >
<!--            内容主题区域-->
            <span>
              <div style="margin: 20px;"></div>
              <el-form label="right" label-width="100px">
              <el-form-item label="小票编号：">
                <el-input :disabled="true" v-model="totalPriceMsg.sequenceNo"></el-input>
              </el-form-item>
                <el-form-item label="总金额：">
                  <el-input :disabled="true" v-model="totalPriceMsg.totalPrice" ></el-input>
                </el-form-item>
                <el-form-item label="开票时间：">
                  <el-input :disabled="true" v-model="totalPriceMsg.sequenceDateTime"></el-input>
                </el-form-item>
              </el-form>
            </span>
<!--            底部区域-->
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="purchaseItem">确 定</el-button>
            </span>
          </el-dialog>
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" @click="clearItem">清空购物车</el-button>
        </el-col>
        <el-col :span="4" >
          <div style="padding: 10px;background: aliceblue;border-radius: 30px"
              id="moneydiv">
            总金额：{{this.getTotalPrice()}} &nbsp;&nbsp;元
          </div>
        </el-col>
      </el-row>
      <!--  商品清单页面区域  -->
      <el-table :data="this.itemList" border stripe height="490">
        <el-table-column type="index"></el-table-column>
        <el-table-column label="商品名" prop="itemName"></el-table-column>
        <el-table-column label="条码" prop="itemBarcode"></el-table-column>
        <el-table-column label="库存数量" prop="stockquantity"></el-table-column>
        <el-table-column label="单位" prop="unitOfMeasure"></el-table-column>
        <el-table-column label="单价" prop="price"></el-table-column>
        <el-table-column label="购买数量" prop="quantity"></el-table-column>
        <el-table-column label="价格">
          <template slot-scope="scope">
            {{scope.row.quantity*scope.row.price}}
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="quantity" width="280px">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.quantity" controls-position="right" @change="handleChange" :min="0.001" :max="scope.row.stockquantity"></el-input-number>
            <el-button type="danger" icon="el-icon-delete" circle @click="removeParams(scope.row.itemBarcode)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

  </div>
</template>

<script>
export default {
  name: 'Cash',
  data(){
    return{
      cinItemBarcode:'',
      itemList:[
      ],
      //后端获取小票信息
      totalPriceMsg: {
        sequenceNo:'',
        totalPrice:'',
        sequenceDateTime:''
      },
      total:0,
      initialflag:0,
      totalPrice:0,
      dialogVisible: false,//小票对话框默认关闭,
    }
  },

  methods:{
    //post请求获取商品信息
    async getItemMsg(){
      const{data:res}=
         await this.$http.post('/addTempItem',
           {itemBarcode:this.cinItemBarcode})
      if (res.code == 10401) {
        await this.$router.push('/login')
        window.sessionStorage.clear()
        return this.$message.error('您没有权限，请重新登陆！')
      }
      if (res.code == 10404) return this.$message.error('库存无该商品，请重新输入单号！')
      if (res.code == 10200) {
        let checkflag=0
        if(this.total!==0){
          for (let tempbar=0;tempbar<this.total;tempbar++) {
            let ij=this.itemList[tempbar].itemBarcode
            if (res.data.itemBarcode & ij == res.data.itemBarcode) {
              this.itemList[tempbar].quantity++
              checkflag=1
              this.newPage()
              return this.$message.warning('该商品已存在，已添加数量！')
            }
          }
        }
        //购物车中没有，进行添加
        if(checkflag==0){
          this.total++
          //信息加入

          let queryInfo={
            itemBarcode:res.data.itemBarcode,
            itemName : res.data.itemName,
            price : res.data.price,
            stockquantity : res.data.quantity,
            unitOfMeasure : res.data.unitOfMeasure,
            quantity:1,
          }
          //this.itemList=this.itemList.concat(queryInfo)
          this.itemList.unshift(...[queryInfo])
          console.log(this.itemList)
          this.newPage()
          return this.$message.success('查询成功！')
        }
      }
     },
    //删除某一项商品
    removeParams(itemBarcode){
      for(let i=0; i<this.total; i++){
        if(this.itemList[i].itemBarcode == itemBarcode){
          this.itemList.splice(i, 1)
          this.total--
          this.newPage()
          return this.$message.success('删除成功')
        }
      }
    },
    //结账功能
    async getPriceMsg(){
      let cashMsg=[]
      this.itemList.forEach(function(value,index) {
        let tempMsg= {
          itemBarcode:value.itemBarcode,
          quantity:value.quantity
        }
        cashMsg=cashMsg.concat(tempMsg)
        console.log(tempMsg)
        //cashMsg.push(...[tempMsg])
      })
      console.log(cashMsg)
      const{data:res}=
        await this.$http.post('/cashiering', cashMsg)
      if (res.code == 10401) {
        await this.$router.push('/login')
        window.sessionStorage.clear()
        return this.$message.error('您没有权限，请重新登陆！')
      }
      if (res.code == 10404) return this.$message.error('库存无该商品！')
      if (res.code == 10412) return this.$message.error('库存不足')
      if (res.code == 10200){
        this.totalPriceMsg=res.data
        this.dialogVisible = true
        return this.$message.success('结账成功！')
      }

    },
    //动态加减
    handleChange(value) {
      console.log(value);
    },
    //获取新的价格
    getTotalPrice(){
      let tempMoney=0
      this.itemList.forEach(function(value,index) {
        tempMoney+=value.price*value.quantity
      })
      this.totalPrice=tempMoney
      return this.totalPrice
    },
    //保证动态刷新
    newPage(){
      let item=[]
      this.itemList.forEach(function(value,index) {
        item[index]=value;
      })
      this.itemList=item;
      console.log(this.itemList)
      this.getTotalPrice()
      this.cinItemBarcode='' //文本框清空
      //保证指针刷新后仍在文本框
      this.$nextTick(()=>{
        this.$refs.clickPosition.focus()
      })
    },
    //确定购物清单，清空列表
    purchaseItem(){
      this.dialogVisible = false;
      this.itemList=[];
      this.newPage()
    },
    //清空重置
    clearItem(){
      this.itemList=[];
      this.newPage()
    }
  }
}
</script>

<style lang="less" scoped>
.text {
  font-size: 14px;
}
.item {
  padding: 18px 0;
}
.el-popover {
  height: 200px;
  overflow: auto;
}

</style>
